<template>
  <div class="header">
    <div class="title">预警各区分布</div>

    <!-- <button type="button" @click="goToDetail">
      查看详情<van-icon name="arrow" />
    </button> -->
    <span></span>
  </div>

  <van-cell-group title="龙华区" inset>
    <van-cell title="学生人数" value="1500" />
    <van-cell title="已完成测评数" value="1400" />
    <van-cell title="预警人数" value="100" />
  </van-cell-group>
  <van-cell-group title="龙岗区" inset>
    <van-cell title="学生人数" value="1500" />
    <van-cell title="已完成测评数" value="1400" />
    <van-cell title="预警人数" value="100" />
  </van-cell-group>
  <van-cell-group title="宝安区" inset>
    <van-cell title="学生人数" value="1500" />
    <van-cell title="已完成测评数" value="1400" />
    <van-cell title="预警人数" value="100" />
  </van-cell-group>
  <van-cell-group title="福田区" inset>
    <van-cell title="学生人数" value="1500" />
    <van-cell title="已完成测评数" value="1400" />
    <van-cell title="预警人数" value="100" />
  </van-cell-group>
  <van-cell-group title="南山区" inset>
    <van-cell title="学生人数" value="1500" />
    <van-cell title="已完成测评数" value="1400" />
    <van-cell title="预警人数" value="100" />
  </van-cell-group>
  <van-cell-group title="罗湖区" inset>
    <van-cell title="学生人数" value="1500" />
    <van-cell title="已完成测评数" value="1400" />
    <van-cell title="预警人数" value="100" />
  </van-cell-group>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { ref, defineEmits, defineProps } from 'vue'
import { useVModel } from '@vueuse/core'
import { useDatePicker } from '/@/use/datePicker'
import { useBack } from '/@/use/useRouteBack'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  reserveDate: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:modelValue'])

const value = useVModel(props, 'modelValue', emit)

const { back: handleBack } = useBack()

// const showReserveDatePicker = ref(false)

// function onConfirm(date: Date) {
//   showReserveDatePicker.value = false
//   value.value = dayjs(date).format('YYYY-MM-DD')
// }

const { onConfirm, picker: showReserveDatePicker } = useDatePicker(value)
</script>

<style scoped lang="less">
@import url('./board-common.less');
</style>
